<template>
	<view class="page">

		<view class="unio2o-coupon-header flex center alcenter text-w">

			<view class="text-center  ft18 ftw600 ml20">先领券，后消费，更省</view>

		</view>
		<view class="unio2o-coupon-tab">
			<view class="unio2o-coupon-tab-h plr30 flex space  alcenter">
				<view @click="showCat" class="cat flex center alcenter" :class="dialog == 1 ? 'on' : ''">
					<view class="ft16">品类</view>
					<view class=" scale6 ml10">
						<text class="jt iconfont iconicon_arrowdown1 "></text>
					</view>
				</view>
				<view class="ct flex alcenter pl20 ft16 text-main ftw400">
					<text class="text-theme">普通券</text>
					<text class="ml20">超值券</text>
				</view>
				<view @click="showScreening" class="screening flex center alcenter" :class="dialog == 2 ? 'on' : ''">
					<view class="ft16">筛选</view>
					<view class=" scale6 ml10">
						<text class="jt iconfont iconicon_arrowdown1 "></text>
					</view>
				</view>
			</view>
			<view v-if="dialog > 0" class="unio2o-coupon-dialog">
				<view class="pd30 bg-w flex wrap">
					<view class="tag-coupon-cat on mr20 mb20 flex center alcenter ft14 text-main">
						全部
					</view>
					<view class="tag-coupon-cat mr20 mb20 flex center alcenter ft14 text-main">
						美食
					</view>
					<view class="tag-coupon-cat mr20 mb20 flex center alcenter ft14 text-main">
						休闲娱乐
					</view>
					<view class="tag-coupon-cat mr20 mb20 flex center alcenter ft14 text-main">
						教育培训
					</view>
					<view class="tag-coupon-cat mr20 mb20 flex center alcenter ft14 text-main">
						母婴亲子
					</view>
					<view class="tag-coupon-cat mr20 mb20 flex center alcenter ft14 text-main">
						酒店
					</view>
					<view class="tag-coupon-cat mr20 mb20 flex center alcenter ft14 text-main">
						婚庆摄影
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="unio2o-coupon-main" scroll-y="true">

			<view class="pd30">
				<view class="mb50" v-for="(item,index) in coupons">
					<unio2o-coupon-item :coupon="item" :showStore="false" type="charge"></unio2o-coupon-item>
				</view>
			</view>


		</scroll-view>


		<unio2o-footer :selectIndex="1"></unio2o-footer>
	</view>
</template>

<script>
	import unio2oCouponItem from '@/components/module/coupon/item.vue';
	export default {
		components: {

			unio2oCouponItem
		},
		data() {
			return {
				type: 0,
				dialog: 0,
				coupons: [{
						id: "C20250601",
						name: "满减券",
						type: 1,
						price: 0,
						amount: 10,
						minAmount: 30,
						discountRate: null,
						maxDiscount: null,
						title: "每满80减20元券",
						description: "美食类通用",
						validFrom: "2025-06-01",
						validTo: "2025-06-30",
						totalCount: 1000,
						remainingCount: 850,
						isNewUser: false,
						isLimited: false,
						isExclusive: false,
						useScene: 1,
						useInstructions: "下单时自动抵扣，不可与其他优惠叠加",
						categoryIds: [101, 102, 104],
						productIds: [],
						isHot: true,
						sort: 1,
						background: "#F34E52",
						tags: ["新店特惠", "周末通用"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 1001,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '蜀大侠火锅',
							distance: '1.2km'
						}
					},
					{
						id: "C20250602",
						name: "折扣券",
						type: 2,
						price: 0,
						amount: null,
						minAmount: 100,
						discountRate: 0.85,
						maxDiscount: 50,
						title: "全场85折券",
						description: "酒店类通用",
						validFrom: "2025-06-05",
						validTo: "2025-06-20",
						totalCount: 500,
						remainingCount: 320,
						isNewUser: false,
						isLimited: true,
						isExclusive: false,
						useScene: 2,
						useInstructions: "入住时出示使用，不包含早餐",
						categoryIds: [201, 203, 205],
						productIds: [],
						isHot: true,
						sort: 2,
						background: "#FFAA00",
						tags: ["限时优惠", "含服务费"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 2001,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '城市豪华大酒店',
							distance: '1.2km'
						}
					},
					{
						id: "C20250603",
						name: "满减券",
						type: 1,
						price: 10,
						amount: 30,
						minAmount: 100,
						discountRate: null,
						maxDiscount: null,
						title: "满100减30元券",
						description: "休闲娱乐通用",
						validFrom: "2025-06-01",
						validTo: "2025-06-15",
						totalCount: 2000,
						remainingCount: 1200,
						isNewUser: false,
						isLimited: false,
						isExclusive: false,
						useScene: 1,
						useInstructions: "消费满100元可用，可叠加会员折扣",
						categoryIds: [301, 303, 304, 307],
						productIds: [],
						isHot: false,
						sort: 3,
						background: "#4A90E2",
						tags: ["工作日可用", "午夜场不适用"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 3001,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '欢乐迪KTV',
							distance: '1.2km'
						}
					},
					{
						id: "C20250604",
						name: "立减券",
						type: 3,
						price: 0,
						amount: 50,
						minAmount: 0,
						discountRate: null,
						maxDiscount: null,
						title: "新用户立减50元",
						description: "周边游通用",
						validFrom: "2025-06-01",
						validTo: "2025-06-30",
						totalCount: 500,
						remainingCount: 380,
						isNewUser: true,
						isLimited: false,
						isExclusive: true,
						useScene: 1,
						useInstructions: "新用户首次下单立减，不可与其他优惠叠加",
						categoryIds: [401, 402, 403, 404],
						productIds: [],
						isHot: true,
						sort: 4,
						background: "#F5A623",
						tags: ["新用户专享", "限时"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 4001,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '环球假期旅行社',
							distance: '1.2km'
						}
					},
					{
						id: "C20250605",
						name: "满减券",
						type: 1,
						price: 0,
						amount: 20,
						minAmount: 50,
						discountRate: null,
						maxDiscount: null,
						title: "满50减20元券",
						description: "亲子乐园通用",
						validFrom: "2025-06-10",
						validTo: "2025-07-10",
						totalCount: 1500,
						remainingCount: 1050,
						isNewUser: false,
						isLimited: false,
						isExclusive: false,
						useScene: 1,
						useInstructions: "需至少1名成人陪同，儿童票不可单独使用",
						categoryIds: [501, 502, 503, 504],
						productIds: [],
						isHot: true,
						sort: 5,
						background: "#F8E71C",
						tags: ["周末通用", "含1份小食"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 5001,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '奇乐儿童乐园',
							distance: '1.2km'
						}
					},
					{
						id: "C20250606",
						name: "折扣券",
						type: 2,
						price: 0,
						amount: null,
						minAmount: 200,
						discountRate: 0.7,
						maxDiscount: null,
						title: "丽人美发7折券",
						description: "美容护肤类通用",
						validFrom: "2025-06-01",
						validTo: "2025-06-25",
						totalCount: 800,
						remainingCount: 420,
						isNewUser: false,
						isLimited: true,
						isExclusive: false,
						useScene: 2,
						useInstructions: "需提前24小时预约，节假日不可用",
						categoryIds: [601, 604],
						productIds: [],
						isHot: false,
						sort: 6,
						background: "#BD10E0",
						tags: ["会员专享", "需电话预约"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 6003,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '美丽田园',
							distance: '1.2km'
						}
					},
					{
						id: "C20250607",
						name: "满减券",
						type: 1,
						price: 0,
						amount: 40,
						minAmount: 200,
						discountRate: null,
						maxDiscount: null,
						title: "满200减40元券",
						description: "健身游泳通用",
						validFrom: "2025-06-05",
						validTo: "2025-07-05",
						totalCount: 1200,
						remainingCount: 780,
						isNewUser: false,
						isLimited: false,
						isExclusive: false,
						useScene: 1,
						useInstructions: "仅限首次到店使用，需出示优惠券码",
						categoryIds: [701, 702, 703, 705],
						productIds: [],
						isHot: true,
						sort: 7,
						background: "#50E3C2",
						tags: ["首次到店", "含私教体验"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 7001,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '力美健健身俱乐部',
							distance: '1.2km'
						}
					},
					{
						id: "C20250608",
						name: "满减券",
						type: 1,
						price: 0,
						amount: 500,
						minAmount: 5000,
						discountRate: null,
						maxDiscount: null,
						title: "结婚摄影满减券",
						description: "婚纱摄影通用",
						validFrom: "2025-06-01",
						validTo: "2025-08-31",
						totalCount: 300,
						remainingCount: 190,
						isNewUser: false,
						isLimited: true,
						isExclusive: false,
						useScene: 1,
						useInstructions: "需在婚礼前3个月使用，需提前预约",
						categoryIds: [801, 803],
						productIds: [],
						isHot: true,
						sort: 8,
						background: "#D0021B",
						tags: ["婚博会专享", "含相册升级"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 8001,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '巴黎春天婚纱摄影',
							distance: '1.2km'
						}
					},
					{
						id: "C20250609",
						name: "折扣券",
						type: 2,
						price: 0,
						amount: null,
						minAmount: 1000,
						discountRate: 0.9,
						maxDiscount: null,
						title: "婚礼策划9折券",
						description: "婚礼服务通用",
						validFrom: "2025-06-15",
						validTo: "2025-09-15",
						totalCount: 200,
						remainingCount: 140,
						isNewUser: false,
						isLimited: false,
						isExclusive: false,
						useScene: 1,
						useInstructions: "需同时预订场地和摄影服务方可使用",
						categoryIds: [801, 802, 803, 804],
						productIds: [],
						isHot: false,
						sort: 9,
						background: "#417505",
						tags: ["套餐专用", "需签订合同"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 8003,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '婚礼纪',
							distance: '1.2km'
						}
					},
					{
						id: "C20250610",
						name: "满减券",
						type: 1,
						price: 0,
						amount: 15,
						minAmount: 50,
						discountRate: null,
						maxDiscount: null,
						title: "美食满50减15元",
						description: "快餐、日料、韩料通用",
						validFrom: "2025-06-01",
						validTo: "2025-06-10",
						totalCount: 3000,
						remainingCount: 1850,
						isNewUser: false,
						isLimited: false,
						isExclusive: false,
						useScene: 1,
						useInstructions: "外卖不适用，需堂食消费",
						shopId: 1003,
						shopName: "悦华轩",
						categoryIds: [103, 106, 107],
						productIds: [],
						isHot: false,
						sort: 10,
						background: "#B8E986",
						tags: ["堂食专用", "午市特惠"],
						timeRestrictions: {
							timeSlots: [{
								startTime: "09:00",
								endTime: "20:00"
							}],
							weekdays: [1, 2, 3, 4, 5, 6, 7],
							specificDates: []
						},
						store: {
							id: 8001,
							logo: 'https://picsum.photos/100/100?random=1',
							name: '巴黎春天婚纱摄影',
							distance: '1.2km'
						}
					}
				]
			};
		},
		methods: {
			changeType(e) {
				this.type = e.currentTarget.dataset.type;
				this.dialog = 0;
			},
			showScreening() {
				this.dialog = this.dialog == 2 ? 0 : 2;
			},
			showCat() {
				this.dialog = this.dialog == 1 ? 0 : 1;
			}
		}
	}
</script>

<style>
	.unio2o-coupon-pt {
		height: 320rpx;
	}

	.tag-coupon-cat {
		width: 210rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		border: 2rpx solid #CCCCCC;
	}

	.tag-coupon-cat.on {
		border-color: #FF6D00;
		color: #FF6D00;
	}

	.unio2o-coupon-main {
		height: calc(100vh - 380rpx - env(safe-area-inset-bottom));
		background: #FFFFFF;
	}

	.unio2o-coupon-dialog {
		height: calc(100vh - 280rpx);
		position: absolute;
		background: rgba(0, 0, 0, .3);
		width: 100%;
		left: 0;
		top: 120rpx;
	}

	.unio2o-coupon-header {
		height: 160rpx;
		background: #FF6D00;
	}

	.unio2o-coupon-header .icon {
		font-size: 48rpx;
	}



	.unio2o-coupon-tab {
		height: 120rpx;
		width: 100%;
		background: #FFFFFF;
		border-bottom: 2rpx solid #E6E6E6;
		position: relative;
		z-index: 10;
	}

	.unio2o-coupon-tab-h {
		height: 118rpx;
	}

	.unio2o-coupon-tab .screening,
	.unio2o-coupon-tab .cat {
		width: 160rpx;
	}

	.unio2o-coupon-tab .screening .jt,
	.unio2o-coupon-tab .cat .jt {
		display: block;
		transition: all .3s;
	}

	.unio2o-coupon-tab .ct {
		width: calc(100% - 320rpx);
	}

	.unio2o-coupon-tab .screening.on,
	.unio2o-coupon-tab .cat.on {
		color: #FF6D00;
	}

	.unio2o-coupon-tab .screening.on .jt,
	.unio2o-coupon-tab .cat.on .jt {
		transform: rotate(180deg);
	}
</style>